<template>
  <div class="common-layout">
    <el-container>
      <!--START 头部 -->
      <el-header height="59px">
        <el-menu
            default-active="/index"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :ellipsis="false"
            @select="handleSelect"
        >
          <el-menu-item index="/index" style="width: 250px">Feel-Online-Mall</el-menu-item>
          <el-menu-item index="3" disabled>
            <el-avatar :size="50" :src="circleUrl"/>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>{{ loginInfo.realname }}</template>
            <el-menu-item index="" @click="infoShow = true">个人信息</el-menu-item>
            <el-menu-item index="" @click="pwdshow = true">修改密码</el-menu-item>
            <el-menu-item index="" @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <!--START 头部 -->

      <el-container>
        <!-- START 左侧菜单栏-->
        <el-aside width="250px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @select="handleSelect"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/category">商品分类管理</el-menu-item>
              <el-menu-item index="/goods">商品管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/order">
              <el-icon>
                <SuccessFilled/>
              </el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="/user">
              <el-icon>
                <Avatar/>
              </el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/admin">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>管理员管理</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon>
                <document/>
              </el-icon>
              <span>管理3</span>
            </el-menu-item>
            <el-menu-item index="4" disabled>
              <el-icon>
                <setting/>
              </el-icon>
              <span>管理4</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- END 左侧菜单栏-->

        <!-- START 主要区域-->
        <el-main>
          <el-tabs
              v-model="path.path"
              type="card"
              editable
              class="demo-tabs"
              @edit="handleTabsEdit"
              @tab-change="name => tabChange(name)"
              @tab-click="pane => tabChange(pane.paneName)"
              style="height: 50px;"
          >
            <el-tab-pane
                v-for="item in path.getTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                lazy
            >
            </el-tab-pane>

          </el-tabs>
          <RouterView/>
        </el-main>
        <!-- END 主要区域-->
      </el-container>
    </el-container>
  </div>


  <!-- START 修改密码对话框 -->
  <el-dialog v-model="pwdshow" title="修改密码" align-center style="width: 300px">
    <el-form :model="pwd">
      <el-form-item label="原密码" style="width: 250px">
        <el-input type="password" v-model="pwd.oldPassword" placeholder="请输入原密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="新密码" style="width: 250px">
        <el-input type="password" v-model="pwd.newPassword" placeholder="请输入新密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="确认密码" style="width: 250px">
        <el-input type="password" v-model="pwd.newPasswordAgain" placeholder="请再次密码" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="pwdshow = false">取消</el-button>
        <el-button type="primary" @click="updatePwd">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- END 修改密码对话框 -->

  <!-- START 修改个人信息对话框 -->
  <el-dialog v-model="infoShow" title="修改密码" align-center style="width: 300px">
    <el-form :model="loginInfo">
      <el-form-item label="用户名" style="width: 250px">
        <el-input v-model="loginInfo.username" placeholder="请输入用户名" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名" style="width: 250px">
        <el-input v-model="loginInfo.realname" placeholder="请输入姓名" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="手机号" style="width: 250px">
        <el-input v-model="loginInfo.phone" placeholder="请输入手机号" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" style="width: 250px">
        <el-input v-model="loginInfo.email" placeholder="请输入邮箱" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="infoShow = false">取消</el-button>
        <el-button type="primary" @click="updateOneInfo">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- END 修改个人信息对话框 -->
</template>

<script setup>
import {ref} from "vue";
import router from '@/router';
import {debounce} from 'lodash-es';
import {usePathStore} from "@/stores/path.js";
import {tokenStore} from "@/stores/token.js";
import adminApi from "@/api/AdminApi.js";
import {ElMessage} from "element-plus";

const circleUrl = ref("https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png")
const loginInfo = ref({
  username: '',
  realname: '',
  phone: '',
  email: ''
})

// 密码相关数据
const pwd = ref({
  oldPassword: null,
  newPassword: null,
  newPasswordAgain: null
})

// pinia中获取数据
const path = usePathStore();
const token = tokenStore();

// 弹出层控制元素
const pwdshow = ref(false)
const infoShow = ref(false)

let viewName = [
  {key: '/index', name: '主页'},
  {key: '/category', name: '商品分类管理'},
  {key: '/goods', name: '商品管理'},
  {key: '/order', name: '订单管理'},
  {key: '/user', name: '用户管理'},
  {key: '/admin', name: '管理员管理'},
]

const handleSelect = (key, keyPath) => {
  // console.log(key, keyPath)
  if (key === '#') {
    return
  } else {
    if (hasTabs(key)) {
      let title = '新增页面'
      viewName.forEach((item => {
        if (item.key === key) {
          title = item.name
        }
      }))
      path.addTab({
        title: title,
        name: key,
        content: key,
      })
    }
    path.setPath(key)
    router.push('/admin' + key)
  }
}

const tabChange = (key) => {
  path.setPath(key)
  router.push('/admin' + key);
}


const editableTabsValue = ref('/index')


const editableTabs = ref(path.getTabs)

const handleTabsEdit = (
    targetName,
    action
) => {
  if (action === 'add') {
    if (hasTabs('/index')) {
      editableTabs.value.push({
        title: '主页',
        name: '/index',
        content: '/index',
      })
      path.addTab({
        title: '主页',
        name: '/index',
        content: '/index',
      })
    }
    editableTabsValue.value = '/index'
    path.setPath('/index')
    router.push('/admin' + '/index');
  } else if (action === 'remove') {
    // const tabs = editableTabs.value
    const tabs = path.getTabs
    // let activeName = editableTabsValue.value
    let activeName = path.getPath
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    path.setPath(activeName)

    path.setTab(tabs.filter((tab) => tab.name !== targetName))
  }
}

// 判断现在显示的页面是否有重复的
const hasTabs = (targetName) => {
  // const tabs = editableTabs.value
  const tabs = path.getTabs
  let count = 1
  tabs.forEach((tab, index) => {
    if (tab.name === targetName) {
      count++
    }
  })
  if (count > 1) {
    return false
  } else {
    return true
  }
}

// 退出登录
const logout = () => {
  token.$reset()
  path.$reset()
  router.push('/admin/login')
}

// 获取已登录用户信息
const getLoginInfo = () => {
  adminApi.getLoginInfo()
      .then(resp => {
        loginInfo.value = resp.data
      })
}

// 更新用户密码
const updatePwd = () => {
  adminApi.updatePwd(pwd.value.oldPassword, pwd.value.newPassword, pwd.value.newPasswordAgain)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          pwdshow.value = false
          router.push('/admin/login')
        } else {
          ElMessage.error(resp.msg)
        }
      })
}
// 修改个人信息
const updateOneInfo = () => {
  adminApi.updateOneInfo(loginInfo.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          infoShow.value = false
        } else {
          ElMessage.error(resp.msg)
        }
        getLoginInfo()
      })
}

// 页面路由转跳
tabChange(path.path)

getLoginInfo()
</script>

<style scoped>
.common-layout {
  height: 100%;
}
.el-container, .el-aside, .el-menu, .el-main {
  height: 100%;
}
.el-main {
  padding-top: 10px;
  max-height: 678px;
}
.el-header {
  padding: 0px;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
  padding: 0 20px;
}

.demo-tabs > .el-tabs__content {
//padding: 32px; //color: #6b778c; //font-size: 32px; //font-weight: 600; padding: 24px;
  font-size: 16px;
  color: #2c3e50;
}
</style>
